<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
	"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
        <title>Bitly Plugin Example</title>
        <!-- needed by preview plugin -->
        <link href="/bitly/css/styles.css" rel="stylesheet" type="text/css">
        <!-- change path to point to your jQuery location -->
        <script type="text/javascript" src="/js/jquery-1.3.1.js"></script>
        <script type="text/javascript" src="/bitly/jquery.bitly.js"></script>
        <script type="text/javascript">
        //<!--
        
        $.fn.bitly.defaults.url = '/bitly/bitly.php';
        
        function infoHandler(data) {
            for(var key in data) {
                var preview = $('#preview');
                var d = data[key];
                var longUrl = d.longUrl.replace('http://', '');
                if( d.contentType.match('text/html')) {
                    var thumb = d.thumbnail.medium;
                    preview.css('width', '256px')
                        .append('<h1>' + d.htmlTitle + '</h1>')
                        .append('<div>' + d.htmlMetaDescription + '</div>');
                    if(thumb) {
                        var img = new Image();
                        $(img).error(function(){})
                            .attr('src', thumb)
                            .load( function() {
                                preview.append(this);
                            });
                    }
                }
                if( d.contentType == 'image/jpeg') {
                    preview.append('<img src="' + d.longUrl + '"/>');
                }
                if( d.contentType == 'audio/mpeg') {
                    for(var label in d.id3) {
                        preview.append('<div><span style="float: left;width:70px">' + label + ':</span> ' + d.id3[label] + '</div>');
                    }
                    if(d.contentLength) {
                        var size = Math.round( d.contentLegth / 1024);
                        preview.append('<div>Size: ' + size + ' Kb</div>');
                    }
                }
        
                if( longUrl.length > 25) {
                    longUrl = longUrl.substring(0, 25) + '&raquo;';
                }
                preview.append('<div>Source: ' + longUrl + '</div>');
                preview.fadeIn();
            }
        }
        
        function updateCounter(msg) {
            if( typeof(msg) == 'string') {
                $('#counter').html(msg);
                return true;
            }
            $('#counter').html('Length: ' + $('#msg').val().length);
        }
        
        $(document).ready( function() {
            updateCounter();
            $('div.shortened a').addPreview(infoHandler);
            $('#msg').keyup( function() {
                updateCounter();
            });
            $('#shortenBtn').click( function() {
                updateCounter('shortening...');
                $('#msg').shortenUrl( function(data) {
                    updateCounter();
                });
            });
        });
        //-->
        </script>
    </head>
    <body>
        <h1>Bitly jQuery plugin usage example</h1>
        <div class="shortened">
            <p>Place mouse pointer over link to preview content.</p>
            <ul>
                <li><a href="http://bit.ly/18YSrx">http://bit.ly/18YSrx</a> (web page) </li>
                <li><a href="http://bit.ly/SdgN">http://bit.ly/SdgN</a> (MP3 file)</li>
                <li><a href="http://bit.ly/jVFH">http://bit.ly/jVFH</a> (image) </li>
                <li><a href="http://music.ruslanas.com/">http://music.ruslanas.com</a> (long URL) </li>
            </ul>
        </div>
        <form action="" method="post">
            <label for="msg">Message (paste text with any number 
            of web addresses starting with http:// and press Shorten):</label>
            <br/>
            <textarea id="msg" cols="50" rows="3">Press Shorten to shorten this long URL http://code.google.com/p/bitly/wiki/Installation</textarea>
            <br/>
            <input type="button" id="shortenBtn" value="Shorten"/>
            <span id="counter"></span>
        </form>
        <hr/>
        <a href="http://bitly.googlecode.com">http://bitly.googlecode.com</a>
    </body>
</html>
